// @ts-ignore
import styled from "styled-components";
type propsType={
  $size?:Number,
  $isRadius?:Boolean,
  $isAmplify?:Boolean,
  $singCover?:Boolean,
};
const SingCoverItemStyle=styled.div<propsType>`
  position: relative;
  //margin: 0 ${(props:propsType)=>props.$size?`calc(${props.$size}px / 10)`:"10px"};
  margin: ${(props:propsType)=>props.$size?`calc(${props.$size}px / 7)`:"20px"} ${(props:propsType)=>props.$size?`calc(${props.$size}px / 5)`:"0"};
  padding: 0 10px;
  width: fit-content;
  height: fit-content;
  .sing-cover-item-cover{
    width: ${(props:propsType)=>props.$size?`calc(${props.$size}px)`:"100px"};
    height: ${(props:propsType)=>props.$size?`calc(${props.$size}px)`:"100px"};
    ${(props:propsType)=>props.$isRadius?"border-radius: 50%;":""}
    background-image: url("${(props:propsType)=>props.$singCover?props.$singCover:'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/sixth-qianfeng/back/weidenglu.png'}");
    background-position: center;
    background-size: 100% 100%;
    transition: all 400ms;
    overflow: hidden;
  }
  
  //给sing-cover-item-cover添加放大效果
  ${
    (props:propsType)=>props.$isAmplify?
          ".sing-cover-item-cover:hover{background-size: 110% 110%;}":
          ""
  }
  .sing-cover-item-name{
    margin: 10px auto;
    font-size: ${(props:propsType)=>props.$size?`calc(${props.$size}px / 5.9)`:"17px"};
    text-align: center;
    font-weight: 100;
    cursor: pointer;
  }
  .sing-cover-item-name:hover{
    color: var(--theme-color);
  }
`;
export default SingCoverItemStyle;
